<template>
  <div>
    <div id="container"></div>
    <div>
      <input type="text" v-model="searchKeyword" placeholder="出发地">
      <button @click="searchLocation">搜索</button>
      <br>
      {{departure}}
      <select id="cars" v-model="departure">
        <option value="">请选择</option>
        <option v-for="car in address" :key="car.id" :value="car">{{ car.name }}</option>
      </select>
    </div>
    <div>
      <input type="text" v-model="destinationsearchKeyword" placeholder="输入目的的">
      <button @click="destinationsearchLocation">搜索</button>
      <br>
      {{destination}}
      <select id="cars" v-model="destination">
        <option value="">请选择</option>
        <option v-for="car in address1" :key="car.id" :value="car">{{ car.name }}</option>
      </select>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import axios from 'axios';

export default {
  name: 'MapComponent',
  data() {
    return {
      departure:{},
      destination:{},
      address:[],
      address1:[],
      map: null,
      marker: null,
      autoComplete: null,
      searchKeyword: '',
      destinationsearchKeyword: '',
      apiKey: '026ef6cc4bb68e803eb48d86fa63d92d', // 替换成你的地图API Key
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      let longitude = 111.160735;
      let latitude = 37.056293;

      this.map = new AMap.Map('container', {
        viewMode: '2D',
        zoom: 14,
        center: [longitude, latitude],
        resizeEnable: true
      });

      this.marker = new AMap.Marker({
        position: [longitude, latitude],
      });

      this.map.add(this.marker);

      this.map.on('click', this.mapClick);

      AMap.plugin("AMap.AutoComplete", () => {
        this.autoComplete = new AMap.AutoComplete();
      });
    },
    mapClick(e) {
      let location = new AMap.LngLat(e.lnglat.lng, e.lnglat.lat);
      this.map.setCenter(location);
      this.marker.setPosition(location);
    },
    destinationsearchLocation() {
      if (this.destinationsearchKeyword.trim() === '') return;

      this.autoComplete.search(this.destinationsearchKeyword, (status, result) => {
        if (status === 'complete') {
          if (result && result.tips && result.tips.length > 0) {
            console.log(result)
            this.address1=result.tips
            let location = result.tips[0].location;
            this.map.setCenter(location);
            this.marker.setPosition(location);
          }
        }
      });
    },
    searchLocation() {
      if (this.searchKeyword.trim() === '') return;

      this.autoComplete.search(this.searchKeyword, (status, result) => {
        if (status === 'complete') {
          if (result && result.tips && result.tips.length > 0) {
            console.log(result)
            this.address=result.tips
            let location = result.tips[0].location;
            this.map.setCenter(location);
            this.marker.setPosition(location);
          }
        }
      });
    },
    getAddress(lng, lat) {
      axios.get(`https://restapi.amap.com/v3/geocode/regeo?key=${this.apiKey}&location=${lng},${lat}`)
          .then(res => {
            if (res.data.regeocode) {
              console.log(res.data.regeocode.formatted_address);
            }
          })
          .catch(error => {
            console.error('Error fetching address:', error);
          });
    }
  }
}
</script>

<style>
#container {
  width: 100%;
  height: 400px;
}
</style>
